/* You can add global styles to this file, and also import other style files */
@import "variables";
@import "./app/shared/directives/icon/icon";
// @import "./app/shared/components/toolbar/toolbar.scss";

/*********************
*全局样式格式化开始
********************/
@media screen and (min-width: 320px) {
  html {font-size: 14px;}
}

@media screen and (min-width: 360px) {
  html {font-size: 16px;}
}

@media screen and (min-width: 400px) {
  html {font-size: 18px;}
}

@media screen and (min-width: 440px) {
  html {font-size: 20px;}
}

@media screen and (min-width: 480px) {
  html {font-size: 22px;}
}

@media screen and (min-width: 640px) {
  html {font-size: 28px;}
}
*,body, html{
  box-sizing: border-box;
}
html{
  font-size: 62.5%;
  font-family: STHeiti,Microsoft YaHei,Helvetica,Arial,sans-serif;
  text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
html,body {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

li {
  list-style-type: none
}

a,a:hover,input {
  outline: 0
}
html hr,section {
  background: 0 0!important
}
body {
  margin: 0;
  max-height: 100%;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-user-drag: none;
  -ms-content-zooming: none;
  touch-action: manipulation;
  word-wrap: break-word;
  -webkit-text-size-adjust: none;
  -ms-text-size-adjust: none;
  text-size-adjust: none;
  user-select: none
}

ins{
  height:auto;
  display: inline;
}
input[placeholder]{
  color: color($h5,c2);
}

input, select, textarea {
  font-size: 100%
}

img {
  margin:0 auto;
  border:none;
  opacity: 1 ;
  max-width: 100% ;
  visibility: visible ;
}
//:before,:after{
//  display: none;
//}
fieldset, img {
  border: 0
}

abbr, acronym {
  border: 0;
  font-variant: normal
}
html hr {
  border: none;
  background: none;
  display: none;
}

del {
  text-decoration: line-through
}

address, caption, cite, code, dfn, em, th, var {
  font-style: normal;
  font-weight: 500
}

ol, ul {
  margin: 0;
  padding-left: 0;
  list-style: none
}
p,dl,dd{
  margin: 0;
}
caption, th {
  text-align: left
}

h1, h2, h3, h4, h5, h6 {
  margin:0;
  font-size: 100%;
  font-weight: 500;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

a:hover,a:link,a:visited,div:hover {
  //border:none ;
  outline:none;
  text-decoration: none ;
}

ins, a {
  text-decoration: none
}
ul li {
  list-style-type: none;
}
a {
  text-decoration: none;
  color: #4f4f4f;
  outline: none
}
a:hover{
  outline:none;
}
a,button,input{
  -webkit-tap-highlight-color:rgba(0,0,0,0) !important;
}
button {
  border: 0;
  font-family: inherit;
  font-style: inherit;
  font-variant: inherit;
  line-height: 1;
  text-transform: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-appearance: button;
  background: transparent;
}
input,button,select,textarea{
  outline:none;
}
select{
  background:none;
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
  border:none;
}
img {
  border: 0 none;
  margin:0 auto;
  vertical-align: middle;
  -webkit-tap-highlight-color:rgba(255,0,0,0) !important;
}
input {
  _background-attachment: fixed;
  border: none;
  outline: none;
  vertical-align: middle;
  -webkit-tap-highlight-color:rgba(255,0,0,0) ;
}
section {
  background: none !important;
}

label {
  cursor: pointer;
}
i{
  font-style: normal;
}

.fn_left {
  float: left;
}
.fn_right {
  float: right;
}

.length {
  width: 100% !important;
}
.hide {
  display: none;
}
.clear {
  clear: both;
  font-size: 0px;
  line-height: 0px;
}
.clear:after {
  content: "";
  line-height: 0;
  margin: 0;
  clear: both;
  height: 0;
  display: block;
  visibility: hidden;
}
.clearfix {
  zoom: 1;
}
.clearfix:after {
  content: "";
  line-height: 0;
  margin: 0;
  clear: both;
  height: 0;
  display: block;
  visibility: hidden;
}
.transfer {
  transition: all 0.2S ease-out 0s;
}
.transfer li {
  transition: all 0.2S ease-out 0s;
}
.overFlow {
  overflow: hidden;
}

.aHonver a:hover {
  color: #0565B9 !important;
  transition: all 0.2S ease-out 0s;
}
.aHover:hover {
  color: #0565B9;
  transition: all 0.2S ease-out 0s;
}
.colorHover a:hover {
  color: #fe6700;
  transition: all 0.2S ease-out 0s;
}
.hidden{
  visibility: hidden;
}
app-root{
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  word-break: break-all;
  @include font-dpr(28px);
  position: absolute;
}

.seed-underline {
  position: relative;
  &::before{
    content: '';
    display: inline-block;
     position: absolute;
    transform: scaleY(.5);
    bottom: 0;
    left: 0;
    width: 100%;
    height:1px;
    border-bottom: 1px solid #e8e8e8;
  }
  &.seed-underline-none::before{
     display: none;
   }
}
.seed-border-top{
  position: relative;
  &:before {
    content: '';
    display: inline-block;
    position: absolute;
    transform: scaleY(0.5);
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    border-top: 1px solid #e8e8e8;
  }
}
.border-top {
  position: relative;
  &::before{
    content: '';
    display: inline-block;
     position: absolute;
    transform: scaleY(.5);
    top: 0;
    left: 0;
    width: 100%;
    height:1px;
    border-bottom: 1px solid #e8e8e8;
    z-index: 9;
  }
}
.padding-20{
  padding: pxTorem(20px);
}
.padding-top-20{
  padding-top: pxTorem(20px);
}
.padding-left-20{
  padding-left: pxTorem(20px);
}
.padding-right-20{
  padding-right: pxTorem(20px);
}
.padding-bottom-20{
  padding-bottom: pxTorem(20px);
}
.padding-top-bottom-20{
  padding-top: pxTorem(20px);
  padding-bottom: pxTorem(20px);
}
.padding-left-right-20{
  padding-left: pxTorem(20px);
  padding-right: pxTorem(20px);
}

.padding-30{
  padding: pxTorem(30px);
}
.padding-top-30{
  padding-top: pxTorem(30px);
}
.padding-left-30{
  padding-left: pxTorem(30px);
}
.padding-right-30{
  padding-right: pxTorem(30px);
}
.padding-bottom-30{
  padding-bottom: pxTorem(30px);
}
.padding-top-bottom-30{
  padding-top: pxTorem(30px);
  padding-bottom: pxTorem(30px);
}
.padding-left-right-30 {
  padding-left: pxTorem(30px);
  padding-right: pxTorem(30px);
}

.gray-background{
  background-color: color($h5, c9);
}
.white-background {
  background-color: #fff;
}
/*gray gap*/
.gap{
  height: pxTorem(15);
  background-color: #f0f0f0;
}
.top-gap{
  margin-top: pxTorem(15);
}
.bottom-gap{
  margin-bottom: pxTorem(15);
}
.distance-from-bottom {
  padding-bottom: pxTorem(50px);
}

/*flex*/
.seed-flexbox{
  display: flex;
}
.seed-flexbox-item{
  flex: 1;
  min-width: 0;
}

/*flex*/
.seed-flexbox{
  display: flex;
}
.seed-flexbox-content-center {
  justify-content: center
}
.seed-flexbox-content-between {
  justify-content: space-between;
}
.seed-flexbox-content-around {
  justify-content: space-around;
}
.seed-flexbox-align-center {
  align-items: center
}

.seed-flexbox-wrap {
  flex-wrap: wrap
}

.seed-flexbox-column {
  flex-direction: column;
}
.seed-flexbox-item{
  flex: 1;
  min-width: 0;
}
.seed-flexbox-item2 {
  flex: 2;
  min-width: 0
}

.seed-flexbox-item3 {
  flex: 3;
  min-width: 0
}

.seed-flexbox-item4 {
  flex: 4;
  min-width: 0
}

.seed-flexbox-item5 {
  flex: 5;
  min-width: 0
}

time.all-the-time {
  display: block;
  //@include font-size(f6);
  font-size:1.2rem;
  color:color($h5,c3);
  //@include set-color(c3);
}
.seed-line-clamp{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.seed-line-clamp2{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.seed-line-clamp3{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.seed-confirm-bg{
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background:black;
  opacity: 0.5
}
.seed-confirm{
  display: flex;
  width:100%;
  height:100%;
  align-items:center;
  justify-content:center;
  .seed-confirm-box{
    width:pxTorem(520);
    height:pxTorem(200);
    border-radius: pxTorem(15px);
    background: color($h5,c10);
    position: relative;
    z-index: 10;
    .confirm-title{
      width:100%;
      height:pxTorem(120);
      line-height: pxTorem(120);
      padding:0 pxTorem(10);
      box-sizing: border-box;
      text-align: center;
      @include font-dpr(28px);
      color:color($h5,c2);
      border-top-left-radius: pxTorem(15);
      border-top-right-radius: pxTorem(15);
    }
    .confirm-button{
      width:100%;
      overflow: hidden;
      height:pxTorem(80);
      border-top: 1px solid color($h5,c9);
      box-sizing: border-box;
      .confirm-yes,.confirm-sure{
        width:50%;
        height:pxTorem(80);
        line-height: pxTorem(80);
        @include font-dpr(30px);
        color:color($h5,c1);
        font-weight: bold;
        text-align: center;
        border-bottom-right-radius: pxTorem(15px);
        float:left;
      }
      .confirm-sure{
        width:100% !important;
      }
      .confirm-no{
        width:50%;
        height:pxTorem(80);
        line-height: pxTorem(80);
        @include font-dpr(30px);
        color:color($h5,c4);
        font-weight: bold;
        text-align: center;
        float:left;
        border-right:1px solid color($h5,c9);
        border-bottom-left-radius: pxTorem(15px);
        box-sizing: border-box;
      }
    }
  }
}

.seed-present{
  display: flex;
  width:100%;
  height:100%;
  align-items:center;
  justify-content:center;
  .seed-present-box{
    width:pxTorem(490);
    padding-top: pxTorem(40);
    border-radius: pxTorem(15);
    background: color($h5,c10);
    position: relative;
    z-index: 10;
    .present-title{
      text-align: center;
      @include font-dpr(32px);
      @include set-color(c2);
      padding-bottom: pxTorem(30);

    }
    .present-msg{
      padding-bottom: pxTorem(30);
      .present-each-msg{
        width:100%;
        line-height: 1.4;
        padding:0 pxTorem(24) pxTorem(10);
        box-sizing: border-box;
        text-align: center;
        @include font-dpr(28px);
        color:color($h5,c2);
      }
    }
    .present-button{
      width:100%;
      overflow: hidden;
      border-top: 1px solid color($h5,c9);
      box-sizing: border-box;
      &.has-cancel{
        .present-yes{
          width:50%;
        }
      }
      .present-yes{
        width:100%;
        padding: pxTorem(30) 0;
        @include font-dpr(28px);
        color:color($h5,c4);
        font-weight: bold;
        text-align: center;
        border-bottom-right-radius: pxTorem(15px);
        float:left;
      }
      .present-no{
        width:50%;
        padding: pxTorem(30) 0;
        @include font-dpr(28px);
        color:color($h5,c1);
        font-weight: bold;
        text-align: center;
        float:left;
        border-right:1px solid color($h5,c9);
        border-bottom-left-radius: pxTorem(15px);
        box-sizing: border-box;
      }
    }
  }
}



//协议样式
#article *{
  font-size: 1.8rem;
  line-height: 2.8rem;
  word-break: break-all;
}
#article .protocol-title{
  font-size: 2.2rem;
  padding-bottom:1rem;
}
#article .article-publish-info {
  color: #999999;
  margin-bottom: 1.5rem;
  border-bottom: 0.1rem solid #f0f0f0;
}
#article .article-publish-info span {
  font-size: 1.6rem;
}
#article .article img,#article .article video{
  width: 100%;
  max-width: 100%;
}
button{
  &[disabled] {
    opacity: .4;
  }
}

//资讯详情页面头部包含文章详情/评论详情,都是用此公共css
//.article-template-comments {
//  // border-bottom: 1px solid #e5e5e5;
//  &:last-of-type {
//    border-bottom: none;
//  }
//  .poster-name {
//    display: flex;
//    align-items: center;
//    justify-content: space-between;
//   .name{
//     max-width: 40%;
//   }
//  }
//
//  .interface-item {
//    padding-top: 0px !important;
//  }
//}

/*.article-template-icon {
  overflow: hidden;
  width: pxTorem(60px);
  height: pxTorem(60px);
  margin-right: pxTorem(20px);
  img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: pxTorem(60px);
  }
}*/

//.article-template-content {
//    flex: 1;
//  .header {
//    display: flex;
//    overflow: hidden;
//    .left-box {
//      flex-grow: 1;
//    }
//  }
//  .gallery {
//    .show {
//      width: 31%;
//      display: inline-block;
//      height: pxTorem(194px);
//      &.gallery-img-type-0 {
//        margin-right: pxTorem(14px);
//      }
//      &.gallery-img-type-2 {
//        margin-left: pxTorem(14px);
//      }
//      img {
//        width: 100%;
//        height: 100%;
//      }
//    }
//  }
//  .interface-item {
//    display: flex;
//    align-items: flex-end;
//    justify-content: flex-end;
//    padding-top: pxTorem(20px);
//  }
//}
//
//.poster-name {
//  @include font-dpr(28px);
//  color: color($h5, c4);
//  display: flex;
//  align-items: center;
//  .nick-name{
//    text-overflow: ellipsis;
//    display: -webkit-box;
//    -webkit-line-clamp: 1;
//    -webkit-box-orient: vertical;
//    overflow: hidden;
//  }
//}

//.article-template-summary {
//  display: block;
//  padding: pxTorem(30px);
//  .header {
//    display: flex;
//    align-content: flex-start;
//  }
//  .article-template-content {
//    flex-grow: 2;
//    .source {
//      padding-top: pxTorem(10px);
//    }
//  }
//}

.icon-type {
  height: pxTorem(26px);
  margin: inherit;
  &.pl-20 {
    padding-left: pxTorem(20px);
  }
}

//.article-template-title {
//  padding: 0.26667rem;
//  @include font-dpr(28px);
//  color: color($h5, c3)
//}
//.article-template-comments {
//  display: flex;
//  margin: pxTorem(34) pxTorem(30) 0 pxTorem(30);
//}
//.article-template {
//  .type {
//    font-weight: bold;
//    @include font-dpr(28px);
//    color: color($h5, c2);
//    padding: pxTorem(10px) 0px;
//  }
//  .article {
//    h3 {
//      font-weight: bold;
//      @include font-dpr(28px);
//      color: color($h5, c2);
//      margin: pxTorem(15px) 0px;
//    }
//    .section {
//      p {
//        @include font-dpr(28px);
//        color: color($h5, c3);
//        margin: pxTorem(15px) 0px;
//        text-align: justify;
//      }
//      seed-img, video {
//        width: 100%;
//        max-width: 100%;
//        margin: pxTorem(15px) 0px;
//      }
//      video {
//        height: pxTorem(400px);
//      }
//      seed-img {
//        height: auto;
//        img {
//          height: auto;
//          max-height: none;
//          min-height: inherit;
//        }
//      }
//    }
//    p {
//      @include font-dpr(28px);
//      color: color($h5, c3);
//      &.has-picture {
//        img {
//          width: 100%;
//        }
//      }
//    }
//    &.summary {
//      margin-top: pxTorem(15);
//      margin-bottom: pxTorem(25);
//      p {
//        overflow: hidden;
//        text-overflow: ellipsis;
//        display: -webkit-box;
//        -webkit-line-clamp: 2;
//        word-break: break-all;
//        -webkit-box-orient: vertical;
//        word-break: break-all;
//        line-height: pxTorem(40);
//      }
//    }
//  }
//  .source {
//    @include font-dpr(24px);
//    color: color($h5, c4);
//    display: flex;
//    align-items: center;
//    .separator {
//      height: 100%;
//      display: inline-block;
//      @include mix-dpr(width, 2);
//      @include mix-dpr(height, 24);
//      margin: 0px pxTorem(20px);
//      background: color($h5, c8);
//    }
//    .tags {
//      margin-right: pxTorem(5px);
//    }
//  }
//  .button-subscription {
//    position: absolute;
//    bottom: 0;
//    right: 0;
//    width: pxTorem(115px);
//    height: pxTorem(52px);
//    background: url(#{$images-path}/subscript_icon_unfollow.png) no-repeat center right/contain;
//    &.isFollow {
//      background: url(#{$images-path}/subscript_icon_isfollow.png) no-repeat center right/contain;
//    }
//  }
//}


//页面点赞留言按钮
.interface {
  color: color($h5, c4);
  display: flex;
  align-items: center;
  @include font-dpr(20px);

  & span.comment,& span.support{
    display: flex;
    align-items: center;
        padding-left:pxTorem(20);
    label {
      width: pxTorem(25px);
      height: pxTorem(25px);
      display: inline-block;
      &.icon_new_message{
        background: url(#{$icons-path}/new_message.png) no-repeat center center/contain;
      }
      &.icon_new_Likes {
        background: url(#{$icons-path}/new_Likes.png) no-repeat center center/contain;

      }
      &.isDigg.icon_new_Likes{
        background: url(#{$icons-path}/new_Likes_hover.png) no-repeat center center/contain;
      }
      &.icon_new_message {
        background: url(#{$icons-path}/new_message.png) no-repeat center center/contain;
      }
    }
    span {
      @include font-dpr(20px);
      padding-left: pxTorem(5px);
    }

  }

  &span.content {
  }
}


@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
img.ng-lazyloaded {
  animation: fadein 1s;
}
//右箭头
.right-arrow-icon {
  position: relative;
  &:after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: pxTorem(17px);
    height: pxTorem(28px);
    background: url(#{$icons-path}/icon_more.png) no-repeat center center/contain;
  }
}
.seed-right-arrow{
  position: relative;
  &:after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: pxTorem(17px);
    height: pxTorem(28px);
    @include icon(30,30,'#{$icons-path}/icon_more_2.png');
  }
}
.no-header{
  .seed-scroll-content{
    margin-top: 0!important;
  }
}


//网格
.seed-grid {
  * {
    box-sizing: border-box;
  }
  width: 100%;
  padding: 0px;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  .seed-grid-row {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
  }
  .seed-grid-col{
    position: relative;
    width: 100%;
    margin: 0;
    min-height: 1px;
  }
}

.share-picture {
  .seed-grid-col{
    padding: pxTorem(3px);
    seed-img {
      width: auto;
      height:auto;
    }
    .img-box {
      background-repeat: no-repeat;
      background-size: cover;
      width: 100%;
      height: 0;
      display: block;
      padding-top: 100%;
    }
  }
}
[col-4] {
  flex: 0 0 33.33333%;
  width: 33.33333%;
  max-width: 33.33333%;
}
[col-5] {
  flex: 0 0 25%;
  width: 25%;
  max-width: 25%;
}
.icon-live:before{
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  top: 0;
  left: 0;
  position: absolute;
  z-index: 3;
  background: url(#{$images-path}/icon_play.png) center center/35% no-repeat;
}

/*文字省略号*/
.text-ellipsis{
    display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mine-miss{
  display: block;
  padding-top:pxTorem(180);
}

.more-info-tip{
  width:100%;
  padding:pxTorem(20) pxTorem(30);
  background:color($h5,c10);
  margin-top:pxTorem(15);
  .more-info-button{
    box-sizing: content-box;
    //margin:pxTorem(20) pxTorem(30);
    border: 1px solid color($h5,c1);
    -moz-border-radius: pxTorem(5px);
    -webkit-border-radius: pxTorem(5px);
    border-radius: pxTorem(5px);
    height:pxTorem(90);
    line-height: pxTorem(90);
    @include font-dpr(30px);
    color: color($h5,c1);
    text-align: center;
  }
}
.seed-gap {
  width: 100%;
  height:pxTorem(15px);
  background: color(c9);
}

/*flex*/
.seed-flexbox{
  display: flex;
}
.seed-flexbox-content-center {
  justify-content: center
}
.seed-flexbox-content-between {
  justify-content: space-between;
}
.seed-flexbox-align-center {
  align-items: center
}

.seed-flexbox-wrap {
  flex-wrap: wrap
}

.seed-flexbox-column {
  flex-direction: column;
}
.seed-flexbox-item{
  flex: 1;
  min-width: 0;
}
.seed-flexbox-item2 {
  flex: 2;
  min-width: 0
}

.seed-flexbox-item3 {
  flex: 3;
  min-width: 0
}

.seed-flexbox-item4 {
  flex: 4;
  min-width: 0
}

.seed-flexbox-item5 {
  flex: 5;
  min-width: 0
}

.seed-fixed-to-roof.isFixed {
  position: fixed;
  top:0;
  left: 0;
  z-index: 10;
}

/*
* text-overflow-ellipsis
* @param:下边框
*/
.border-bottom-scaleY{
  position: relative;
  &:after{
    content:'';
    display: block;
    width:100%;
    height:1px;
    background:color($h5,c9);
    transform: scaleY(0.5);
    position: absolute;
    bottom:0;
    left:0;
  }
}/*
* @param:上边框
*/
.border-top-scaleY{
  position: relative;
  &:before{
    content:'';
    display: block;
    width:100%;
    height:1px;
    background:color($h5,c9);
    transform: scaleY(0.5);
    position: absolute;
    top:0;
    left:0;
  }
}


.seed-view-more-btn{
  padding: pxTorem(40) pxTorem(30);
  span {
    display: block;
    height: pxTorem(90);
    line-height: pxTorem(90);
    text-align: center;
    @include font-dpr(30px);
    border-radius: 4px;
    color: #FFF;
    background-color: color($h5, c1);
  }
}

.seed-module-title{
  padding-left: pxTorem(20);
  border-left: solid pxTorem(6) color($h5, c1);
  font-size: standard($f, f4);
  color: color($h5, c2);
}
